import React, { useState } from 'react';
import { useNavigate } from "react-router-dom";
import './songsList.scss';

export default function SongsList(props) {
    let navigate = useNavigate();
    // 从父页面中接收变量
    let { songsList } = props;
    function addZero(num) {
        return num < 10 ? '0' + num : '' + num;
    }
    function todetails(e, song) {
        navigate('/index/details', { state: { song: song } })
    }
    return (
        <ul id='songsList'>
            {
                songsList.map(item => {
                    return (
                        <li onClick={(e) => todetails(e, item)} key={item.id} className='songName'>
                            <img className='image' src={item.album.artist.img1v1Url} alt="图片" />
                            <div>
                                歌名：{item.name}
                                <br />
                                时长：{`${addZero(parseInt(item.duration / 1000 / 60, 10))}:${addZero(parseInt(item.duration / 1000 % 60, 10))}`}
                                <br />
                                演唱：{
                                    item.artists.map((artItem, index) => {
                                        return (
                                            <span key={artItem.id}>{artItem.name}{index === item.artists.length - 1 ? '' : '、'}</span>
                                        )
                                    })
                                }
                                <br />
                                专辑：{item.album.name}
                            </div>

                        </li>
                    )
                })
            }
        </ul>
    )
}